<template>
	<div id="new">
		<p class="newone">
			新品上市
		</p>
		<div class="newtwo" v-for="item in commodity">
			<van-image  width="98%" height="250px" lazy-load :src="url+item.original_img" class="newimg"/>
			<van-row>
				<van-col :span="24" class="newname">{{item.goods_name}}</van-col>
			</van-row>
			<van-row>
				<van-col :span="24" class="newcontent">{{item.goods_name}}</van-col>
			</van-row>
			<van-row>
				<van-col :span="24" class="newprice"><span style="font-size: 1.125rem;">￥</span>{{item.shop_price}}</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default
	{
		data()
		{
			return{
				commodity:[],
				url:'https://img.9lele.com'
			}
		},
		computed:{
			...mapGetters([
				'getcommodity'
			])
		},
		created()
		{
			this.$nextTick(function()
			{
				this.$store.dispatch('picture/vuexCommodity',"新品上市")
				.then(e=>
				{
					this.commodity=e.data.data
				})
			})
		}
	}
</script>

<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	#new{
		width: 100%;
		height: 450px;
		white-space: nowrap;
		overflow-y: scroll;
	}
	.newone{
		width: 100%;
		height: 30px;
		font-size: 1.5625rem;
		font-weight: bold;
		text-align: left;
		text-indent: 20px;
		margin-top: 20px;
	}
	.newtwo{
		width: 55%;
		height: 370px;
		background-color: white;
		margin-left: 2%;
		border-radius: 5%;
		border: solid 3px #f5f5f5;
		display: inline-block;
		margin-top: 20px;
	}
	
	/* 去掉滚动条 */
	::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
	
	.newname{
		text-align: left;
		margin-top: 10px;
		width: 100%;
		height: 30px;
		font-size: 1.25rem;
		font-weight: bold;
		text-indent: 5px;
		
		overflow: hidden;
		white-space: nowrap;
		/* 变成点 */
		text-overflow: ellipsis;
	}
	.newcontent{
		text-align: left;
		margin-top: 5px;
		text-indent: 5px;
		font-size: 1.125rem;
		color: #999;
		
		/* 变成点 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.newprice{
		color: red;
		text-align: left;
		text-indent: 5px;
		margin-top: 5px;
		font-size: 1.5625rem;
	}
	.newimg{
		margin-top: 2px;
	}
</style>
